<template>
  <div>
    <!-- 顶部搜索 -->
    <van-search class="search-box" placeholder="搜索商品,共185075款好物" @click="() => router.push('/search')" />
    <!-- 侧边导航 -->
    <van-sidebar v-if="categoryL1List" v-model="activeIndex">
      <van-sidebar-item :title="item.name" v-for="item in categoryL1List" :key="item.id"
        @click="changeSidebar(item.id)" />
    </van-sidebar>

    <!-- 大图 -->
    <a :href="params.categoryId === 11 ? bannerList.targetUrl : ''">
      <img class="bannerUrl" :src="bannerList.picUrl" />
    </a>

    <!-- 二级分类 -->
    <van-grid :column-num="3" v-if="params.categoryId === 11" v-for="item1 in categoryGroupList" :key="item1.id">
      <van-grid-item v-for="value in item1.categoryList" :key="value.id" @click="toCateList(value)">
        <van-image :src="value.bannerUrl" />
        <p>{{ value.name }}</p>
      </van-grid-item>
    </van-grid>

    <van-grid :column-num="3" v-else v-for="item2 in categoryGroupList" :key="item2.id">
      <p class="gridTitle">{{ item2.name }}</p>
      <van-grid-item v-for="value in item2.categoryList" :key="item2.id" @click="toCateList(value)">
        <van-image :src="value.wapBannerUrl" />
        <p>{{ value.name }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup lang="ts">
import { reqCategoryList } from '@/api/category'
import { onMounted, ref } from 'vue'
import type {
  IReqCategory,
  bannerListItem,
  categoryGroupListItem,
  categoryListItem
} from '@/types/category'
import { useRouter } from 'vue-router'
const router = useRouter()

const params = ref<IReqCategory>({
  __timestamp: 1691403418119,
  categoryId: 11,
  subCategoryId: 111,
  categoryType: 0
})
const activeIndex = ref(0)

const categoryGroupList = ref<categoryGroupListItem[]>([])
// const categoryList = ref<categoryListItem[]>([])

const categoryL1List = ref<categoryListItem[]>([])

const bannerList = ref<bannerListItem>({} as bannerListItem)

const getCategory = async () => {
  const {
    data: { data }
  } = await reqCategoryList(params.value)
  console.log(data)
  categoryGroupList.value = data.categoryGroupList
  categoryL1List.value = data.categoryL1List
  bannerList.value = data.currentCategory.bannerList[0]
}

const changeSidebar = (e: any) => {
  params.value.categoryId = e
  console.log(params.value.categoryId)
  console.log(params.value)
  getCategory()
}

const toCateList = (e: any) => {
  // console.log(e.id)
  params.value.subCategoryId = e.id
  router.push(
    `/list?categoryId=${params.value.categoryId}&subCategoryId=${params.value.subCategoryId}&categoryType=0`
  )
}

// const toBanner = (e: any) => {
//   console.log(e)
// }

onMounted(() => {
  getCategory()
})
</script>

<script lang="ts">
export default {
  name: 'CateGory'
}
</script>

<style scoped lang="less">
p {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
}

:deep(.van-sidebar) {
  float: left;
}

.bannerUrl {
  width: 264px;
  height: 96px;
}

:deep(.van-grid) {
  height: 100%;
  padding: 15px;
}

.gridTitle {
  width: 264px;
  height: 21px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 0.8px solid #eee;
  margin-bottom: 12px;
}
</style>
